<script setup lang="ts">
import { ref, onMounted } from 'vue';
import DarkModeContainer from '@/components/common/dark-mode-container.vue';
import { useThemeStore } from '@/store/modules/theme';
import SvgIcon from '@/components/custom/svg-icon.vue';
import { ElMessage } from 'element-plus';

defineOptions({ name: 'ClientFooter' });

const themeStore = useThemeStore();
const currentYear = new Date().getFullYear();

// 励志语录数据
interface Quote {
  text: string;
  author: string;
}

const quotes: Quote[] = [
  { text: '你越是愿意认识到自己的脆弱，就越不会害怕。', author: '洛杉矶·戈特利布' },
  { text: '生活不是等待风暴过去，而是学会在雨中跳舞。', author: '薇薇安·格林' },
  { text: '当你无法改变风向时，可以调整帆的方向。', author: '托马斯·S·蒙森' },
  { text: '最困难的时刻，也是离成功最近的时刻。', author: '拿破仑·希尔' },
  { text: '勇气不是没有恐惧，而是不被恐惧所控制。', author: '纳尔逊·曼德拉' },
  { text: '成功不是最终的，失败也不是致命的，重要的是继续前进的勇气。', author: '温斯顿·丘吉尔' },
  { text: '没有人可以回到过去重新开始，但谁都可以从今天起，书写一个全然不同的结局。', author: '玛丽亚·罗宾逊' },
  { text: '人的价值，在遭受诱惑的一瞬间被决定。', author: '奥斯卡·王尔德' },
  { text: '不要等待机会，而要创造机会。', author: '林肯' },
  { text: '成功的秘诀在于坚持最初的梦想。', author: '沃尔特·迪斯尼' }
];

const currentQuote = ref<Quote>(quotes[0]);
const showAuthor = ref(false);

// 随机获取一条语录
function getRandomQuote() {
  const randomIndex = Math.floor(Math.random() * quotes.length);
  currentQuote.value = quotes[randomIndex];
}

// 复制语录
function copyQuote() {
  const quoteText = `${currentQuote.value.text} —— ${currentQuote.value.author}`;
  navigator.clipboard.writeText(quoteText).then(() => {
    ElMessage.success('已复制到剪贴板');
  }).catch(() => {
    ElMessage.error('复制失败');
  });
}

// 组件挂载时获取随机语录
onMounted(() => {
  getRandomQuote();
});
</script>

<template>
  <DarkModeContainer class="h-full flex-center">
    <div 
      class="relative flex-center w-full cursor-pointer group"
      @click="copyQuote"
      @mouseenter="showAuthor = true"
      @mouseleave="showAuthor = false"
    >
      <!-- 励志语录文本 - 使用nowrap防止换行 -->
      <p 
        class="text-14px text-center transition-all max-w-lg px-8 whitespace-nowrap overflow-hidden text-ellipsis"
        :class="themeStore.footer.fixed ? 'dark:text-white' : 'text-[#6a6a6a] dark:text-white'"
      >
        {{ currentQuote.text }}
      </p>
      
      <!-- 作者和切换按钮 (悬浮时显示) - 放在正下方居中 -->
      <div 
        class="absolute left-1/2 transform -translate-x-1/2 top-full mt-1 flex items-center justify-center transition-opacity duration-300"
        :class="showAuthor ? 'opacity-100' : 'opacity-0'"
      >
        <span class="text-12px text-gray-500 dark:text-gray-400">
          —— {{ currentQuote.author }}
        </span>
        <div 
          class="p-1 ml-2 rounded hover:bg-gray-200 dark:hover:bg-gray-700 cursor-pointer"
          @click.stop="getRandomQuote"
        >
          <SvgIcon icon="mdi:refresh" class="text-16px text-gray-500 dark:text-gray-400" />
        </div>
      </div>
      
      <!-- 提示文本 -->
      <div 
        class="absolute bottom-0 left-1/2 transform -translate-x-1/2 translate-y-6 opacity-0 group-hover:opacity-100 transition-opacity duration-300"
      >
        <span class="text-10px text-gray-400">点击复制</span>
      </div>
    </div>
  </DarkModeContainer>
</template>

<style scoped>
/* 修复后台管理端底部位置 - 使底部内容相对于整个页面宽度居中，而不受左侧菜单影响 */
:deep(.el-footer) {
  width: 100vw !important;
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  padding: 0 !important;
}
</style> 